<template>
	<view class="container">
		<view class="list">
			<view v-for="(item, index) in userList" :key="index" @click="handleSelect(item.id, index)">
				<view class="icon">
					<icon v-if="item.isSelect" color="#F39B19" type="success" size="18" />
					<!-- 非选中显示 -->
					<icon v-if="!item.isSelect" type="circle" size="18"></icon>
				</view>
				<!-- 主体内容@click="handleOpenDetail(item.id)" -->
				<view class="main">
					<view>
						<image class="avatar" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg" mode="aspectFill"></image>
						<view>
							<view>
								<text>哈哈哈</text>
								<image class="sex-icon" src="/static/wgc_icon/4.png"></image>
							</view>
							<view>
								<text>诚信值</text>
								<text>48.6</text>
							</view>
						</view>
					</view>
					<view>
						<text>成交单数</text>
						<text>42</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部控件 -->
		<view class="button-handle">
			<view @click="handleSelectAll">
				<icon v-if="isSelectAll" color="#F39B19" type="success" size="18" />
				<!-- 非选中显示 -->
				<icon v-if="!isSelectAll" type="circle" size="18"></icon>
				<text>全选</text>
			</view>
			<view class="invitation-go" @click="handleInvite">立即邀请</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelectAll: false,//是否全部选中
				// isSelect: false,
				imgPath:'',//图片路径
				usersObj: { //获取雇员们上传参数
					endAge: '',
					endStature: '',
					expectWorkType: '',
					isAsc: 'asc',
					lat	: '',	
					lng: '',
					orderByColumn: 'distance',
					pageNum: 1,
					pageSize : 1000,
					region: '',
					sex: '',
					startAge: '',
					startStature: '',
					userJobStatus: '',
					userName: '',
				},
				userList : [],
				selectList:[], //选中的列表
				userIds: '',
			};
		},
		methods: {
			// 获取雇员列表
			async get_user_list () {
				console.log('usersObj', this.usersObj)
				let res = await this.$fetch(this.$api.get_user_list, this.usersObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				// 整理数据
				res.rows.forEach(item => {
					item.isSelect = false
				})
				this.userList = res.rows
			},
			
			// 雇员详情
			// handleOpenDetail(staffId) {
			// 	uni.navigateTo({
			// 		url: '/pages/employer-detail/employee-detail?staffId=' + staffId 
			// 	})
			// },
			
			// 选中的雇员
			handleSelect(staffId, index) {
				this.userList[index].isSelect = !this.userList[index].isSelect
				// 全点了，点亮全选按钮
				let all = ''
				this.userList.forEach(item => {
					if(!item.isSelect) return  all = 'hasFalse'
				})
				this.isSelectAll = all ? false : true
			},
			
			// 全选
			handleSelectAll() {
				this.userList.forEach(item => {
					item.isSelect = this.isSelectAll ? false : true
				})
				this.isSelectAll = !this.isSelectAll
			},
			
			// 立即邀请
			async handleInvite() {
				this.userList.forEach(item => {
					if(item.isSelect) {
						this.userIds = this.userIds + item.id
					}
				})
				console.log('taskId',this.taskId, 'userIds', this.userIds)
				let res = await this.$fetch(this.$api.invitation_order, {taskId: this.taskId, userIds: this.userIds,}, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				uni.showToast({ title: '邀请成功成功~', icon: 'none' })
				//setTimeout(() => { uni.redirectTo({ url: '/pages/my-job/boss-my-job' }) }, 800)
				setTimeout(() => { uni.redirectTo({ url: '/pages/my-job/boss-my-job-new' }) }, 800)
			},
		},
		onShow() {
			console.log('邀请页面')
			this.imgPath = uni.getStorageSync('imgPath')
			this.usersObj.sex = uni.getStorageSync('conditionForStaff').sex
			this.usersObj.lat = uni.getStorageSync('conditionForStaff').lat
			this.usersObj.lng = uni.getStorageSync('conditionForStaff').lng
			this.taskId = uni.getStorageSync('conditionForStaff').taskId
			this.get_user_list()
		},
	}
</script>

<style lang="less">
.container {
	// margin-bottom: 30rpx;
	.list {
		margin-bottom: 130rpx;
		
		& > view {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			
			.icon {
				margin-left: 30rpx;
				margin-right: 20rpx;
			}
			
			.main {
				width: 574rpx;
				background: #FFFFFF;
				border-radius: 7px;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				
				.avatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
				
				.sex-icon {
					width: 26rpx;
					height: 26rpx;
					margin-left: 20rpx;
				}
				
				& > view:first-child {
					display: flex;
					
					& > view {
						
						& > view:first-child {
							font-size: 17px;
							line-height: 48rpx;
							display: flex;
							align-items: center;
						}
						
						& > view:last-child {
							display: flex;
							align-items: center;
							margin-top: 20rpx;
							
							text:first-child {
								color: rgba(64,33,16,0.70);
								margin-right: 30rpx;
							}
						}
					}
				}
				
				& > view:last-child {
					display: flex;
					flex-direction: column;
					
					text:first-child {
						color: rgba(64,33,16,0.70);
						font-size: 12px;
					}
					
					text:last-child {
						font-size: 22px;
						color: #F39B19;
						text-align: right;
						line-height: 60rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.button-handle {
		display: flex;
		align-items: center;
		position: fixed;
		width: 100vw;
		height: 100rpx;
		background: #FFFFFF;
		bottom: 0;
		
		& > view:first-child {
			width: 192rpx;
			display: flex;
			align-items: center;
			height: 100rpx;
			
			icon {
				margin-left: 30rpx;
				margin-right: 20rpx;
			}
		}
		
		& > .invitation-go {
			background: #FCC928;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			&:active {
				opacity: 0.7;
			}
		}
	}
}
</style>
